<template>
	<div class="cartContainer">
		<view class="title">
			购物车
		</view>
		<view class="header">
			<text>30天无忧退货</text>
			<text>48小时快速退货</text>
			<text>满99元免邮费</text>
		</view>
		<view class="contentContainer" v-if="cartList.length===0">
			<image class="cartImg" src="http://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/noCart-d6193bd6e4.png" mode=""></image>
			<!-- <button class="cartBtn" >登录</button> -->
			<view class="addMore">
				去添加点什么吧
			</view>
		</view>
		<!-- 登陆之后的购物车 -->	
		<!-- block不会生成元素 -->
		<block v-else>
			<view class="cartList" >
				<view class="cartItem" v-for="(shopItem,index) in cartList" :key="shopItem.id">
					<text class="iconfont icon-xuanzhong" @click="changeShopItemSelected(!shopItem.selected,index)" :class="{selected:shopItem.selected}"></text>
					<view class="shopItem">
						<image class="shopImg" :src="shopItem.listPicUrl" mode=""></image>
						<view class="shopInfo">
							<text class="shopDesc">{{shopItem.name}}</text><br>
							<text class="price">￥{{shopItem.retailPrice}}</text>
						</view>
					</view>
					<!--控制数量 -->
						<view class="countCtrl">
							<text class="calc add" @click="changeShopItemCount(true,index)">+</text>
							<text class="calc count">{{shopItem.count}}</text>
							<text class="calc del" @click="changeShopItemCount(false,index)">-</text>
						</view>
				</view>
			</view>
			<!-- 底部下单  -->

		</block>
		<view class="cartFooter">
			<view class="left">
				<text class="iconfont icon-xuanzhong" @click="changeSelectedAll(!isSelectedAll)" :class="{selected:isSelectedAll}"></text>
				<text class="allSelected">已选{{AllNumAndMoney["count"]}}</text>
			</view>
			<view class="right">
				<text class="totalPrice">合计：￥{{AllNumAndMoney["money"]}}</text>
				<text class="preOrder">下单</text>
			</view>
		</view>
	</div>
</template>

<script>
	import {mapState,mapMutations,mapGetters} from 'vuex'
	export default{
		data(){
			return{
				
			}
		},
		computed:{
			...mapState({
				cartList:state=>state.cart.cartList
			}),
			...mapGetters(["isSelectedAll","AllNumAndMoney"]),
		},
		methods:{
			// 不需要发请求，需要及时更改
			...mapMutations(['changeShopItemCountMutation','changeShopItemSelectedMutation','changeSelectedAllMutation']),
			changeShopItemCount(type,index){
				// 多参数时必须用对象封装
				this.changeShopItemCountMutation({type,index})
			},
			changeShopItemSelected(selected,index){
			   this.changeShopItemSelectedMutation({selected,index})
			},
			changeSelectedAll(selected){
				this.changeSelectedAllMutation(selected)
			}
		}
	}
</script>

<style lang="stylus">
	.cartContainer
		background-color #f3f3f3
		height 100vh

		.title
			height 100upx
			line-height 100upx
			width 100%
			padding-left 5%
			background-color #fff
			box-shadow 0rpx 1rpx 0rpx 1rpx #ccc
		.header
			display flex
			margin-top 5upx
			justify-content space-around
			background-color #eee
			font-size 30upx
			height 80upx
			line-height 80upx
		.contentContainer
			display flex
			flex-direction column
			align-items center
			position relative
			top 20%
			.cartImg
				width 240upx
				height 240upx
			.cartBtn
				width 60%
				margin-top 40upx
				margin-bottom 10upx
				color #fff
				background-color #EC2E1E
			.addMore
				text-align center
				width 300upx
				font-size 30upx
				color #888
		.cartList
			width 100%
			.cartItem
				display flex
				position relative
				width 100%
				height 180upx
				background-color #fff
				padding 1% 3%
				margin-bottom 20upx
				.iconfont
					font-size 40upx 
					line-height 180upx
					padding 0 8upx
					color #C0C0C0
					&.selected
						color red
				.shopItem
					display flex
					.shopImg
						width 180upx
						height 100% 
						margin-right 20upx
					.shopInfo
						padding 10upx 0
						font-size 28upx
						.shopDesc
							display inline-block
							width 360upx
							white-space nowrap
							overflow hidden
							text-overflow ellipsis
						.price
							line-height 3
							color red
				.countCtrl
					position absolute
					right 60upx
					bottom 20upx
					.calc
						padding 8upx 22upx
						border 1upx solid #aaa
		.cartFooter
			display flex
			position fixed
			bottom 0
			height 100upx
			width 100%
			line-height 100upx
			font-size 32upx
			background-color #fff
			justify-content space-between
			.left
				width 35%
				.iconfont
					color #C0C0C0	
					margin 0 2%
					font-size: 50rpx
					&.selected
						color red
			.right
				width 65%
				position relative
				.preOrder
					display inline-block
					position absolute
					right 0
					width 220upx
					height 100%
					font-size 36upx
					text-align center
					color #fff
					border 2upx solid #eee
					background-color red
				
			
				
		
</style>
